<template>
    <div class="notice">
        <div class="banner container-fuild text-center">公告详情</div>
        <div class="container">
          <div class="notice-left">
            <div class="item first-item" @click="viewDetail">
              <h4>关于夫妻存续期间的债务承担，怎么确定？</h4>
              <span>在当今，绝大多数债权人都在使用债权转让的方式处理债权问题。债权转让，是指 债权人通过协议，将其债权全部...</span>
            </div>
            <div class="item other-item" @click="viewDetail">
              <img src="@/assets/img/banner1.png" alt="">
              <div>
                <h4>关于夫妻存续期间的债务承担，怎么确定？</h4>
                <span>夫妻存续期间的债务应当由夫妻双方共同承担，但是这只是针对于为了满足夫妻 共同生活...</span>
                <p>2021-07-08</p>
              </div>
            </div>
            <div class="item other-item" @click="viewDetail">
              <img src="@/assets/img/banner1.png" alt="">
              <div>
                <h4>关于夫妻存续期间的债务承担，怎么确定？</h4>
                <span>夫妻存续期间的债务应当由夫妻双方共同承担，但是这只是针对于为了满足夫妻 共同生活...</span>
                <p>2021-07-08</p>
              </div>
            </div>
            <div class="item other-item" @click="viewDetail">
              <img src="@/assets/img/banner1.png" alt="">
              <div>
                <h4>关于夫妻存续期间的债务承担，怎么确定？</h4>
                <span>夫妻存续期间的债务应当由夫妻双方共同承担，但是这只是针对于为了满足夫妻 共同生活...</span>
                <p>2021-07-08</p>
              </div>
            </div>
            <div class="item other-item" @click="viewDetail">
              <img src="@/assets/img/banner1.png" alt="">
              <div>
                <h4>关于夫妻存续期间的债务承担，怎么确定？</h4>
                <span>夫妻存续期间的债务应当由夫妻双方共同承担，但是这只是针对于为了满足夫妻 共同生活...</span>
                <p>2021-07-08</p>
              </div>
            </div>
            </div>
          <div class="notice-right">
            <h4>推荐热点</h4>
            <ul>
              <li @click="viewDetail"><span>【债权】</span>融资租赁合同主要构成及特点</li>
              <li @click="viewDetail"><span>【行业】</span>执行程序中应如何实现债务抵销...</li>
              <li @click="viewDetail"><span>【债权】</span>股权转让中的9大纳税...</li>
              <li @click="viewDetail"><span>【行业】</span>执行程序中应如何实现债务抵销...</li>
              <li @click="viewDetail"><span>【行业】</span>执行程序中应如何实现债务抵销...</li>
              <li @click="viewDetail"><span>【行业】</span>执行程序中应如何实现债务抵销...</li>
            </ul>
          </div>
        </div>
        <el-pagination
            background
            layout="prev, pager, next"
            :total="150">
          </el-pagination>
    </div>
</template>
<script>
import { WOW } from 'wowjs';
export default {
    name: 'Notice',
    data(){
        return{
          // noticeRight: [{

          // }]
        }
    },
    mounted(){
        var wow = new WOW();
        wow.init();
        
        this.$util.post('api/notice/getNoticeInfo',{}).then(res=>{
          console.log(res,'88888888888888')
        })
    },
    methods: {
      viewDetail(id) {
        id='123456';
        this.$router.push({path: `noticeDetail/${id}`})
      }
    }
}
</script>
<style scoped>
.banner {
    color: #fff;
    font-size: 30px;
    height: 300px;
    line-height: 150px;
    background-image: url('../assets/img/banner1.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: scroll;
    background-position: center center;
}
.container {
  display: flex;
  justify-content: space-between;
}
.container .notice-left {
  flex: 1;
  margin-right: 30px;
}
.container .notice-right {
  width: 270px;
}
.container .notice-left .item {
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}
.container .notice-left .first-item {
  background-image: url('../assets/img/banner1.png');
  width: 100%;
  height: 250px;
  flex-direction: column;
  justify-content: end;
  padding: 0 40px 20px;
}
.container .notice-left .item img {
  width: 250px;
  height: 150px;
  margin-right: 20px;
}
.container .notice-left .item span {
  color: #666666;
  font-size: 12px;
}
.container .notice-left .item p{
  color: #666666;
  font-size: 12px;
  margin: 50px 0 0;
}
.container .notice-right li {
  color: #666666;
  line-height: 28px;
  cursor: pointer;
}
.container .notice-right li span{
  color: #3B8FEE;
}
.el-pagination {
  text-align: center;
  margin-top: 40px;
}
@media screen and (max-width: 997px){
  .CompanyIntroduction-container{
    padding: 10px 0;
    color: #808080;
  }
}
</style>

